<template>
  <div class="app-container">
    <div class="basicInfo">
      <p class="title">筛选条件</p>
      <div class="select">
        <p class="selectType">
          <span>风险类型：</span><span
            @click="handlActiveOne('all')"
            :class="[{ cur: activeSelectOne == 'all' }]"
          >全部</span><span
            @click="handlActiveOne(ite.value)"
            :class="[{ cur: activeSelectOne == ite.value }]"
            v-for="(ite, i) in dataFXDL"
            :key="ite + i"
          >{{ ite.label }}</span>
        </p>
        <p class="selectType">
          <span>风险等级：</span><span
            @click="handlActiveTwo('all')"
            :class="[{ cur: activeSelectTwo == 'all' }]"
          >全部</span><span
            @click="handlActiveTwo(ite.value)"
            :class="[{ cur: activeSelectTwo == ite.value }]"
            v-for="(ite, i) in dataYJDJ"
            :key="ite + i"
          >{{ ite.label }}</span>
        </p>
        <p class="selectType">
          <span>时　　间：</span>
          <span
            @click="handlActiveTree('all')"
            :class="[{ cur: activeSelectTree == 'all' }]"
          >全部</span>
          <span
            @click="handlActiveTree(ite.fieldCode)"
            :class="[{ cur: activeSelectTree == ite.fieldCode }]"
            v-for="(ite, i) in selectOptions3"
            :key="ite + i"
          >{{ ite.fieldName }}</span>
          <!-- <span v-show="isShowDate">
            <el-date-picker
              v-model="dateValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onDateChange"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:100%"
            >
            </el-date-picker>
          </span> -->
          <el-date-picker
            v-if="isShowDate"
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onDateChange"
            value-format="yyyy-MM-dd"
            size="mini"
          >
          </el-date-picker>
        </p>
      </div>

      <p class="title">风险列表</p>
      <el-table
        :data="tableDataTwo"
        style="width: 100%"
        v-loading="loading"
        border
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (pageNumTwo - 1) * 10 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="企业名称"
          prop="qymc"
          align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          label="风险类型"
          prop="fxdl"
          align="center"
          :formatter="fxdlFormat"
        ></el-table-column>
        <el-table-column
          label="风险名称"
          prop="yjxl"
          align="center"
        ></el-table-column>
        <el-table-column
          label="风险等级"
          prop="yjdj"
          align="center"
          :formatter="yjdjFormat"
        >
        </el-table-column>
        <el-table-column
          label="发生时间"
          prop="yjTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="text"
              @click.stop="detailBtn(row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="sizeChangeTwo"
          @current-change="pageChangeTwo"
          :current-page="pageNumTwo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSizeTwo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTwo"
        ></el-pagination>
      </div>
    </div>
    <!-- 风险列表详情 -->
    <el-dialog
      title="查看详情"
      class="avue-dialog"
      center
      :visible.sync="dialogDetail"
      width="40%"
    >
      <div class="contBox">
        <el-form
          :model="detailData"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="企业名称:">
            <span>{{ detailData.qymc }}</span>
          </el-form-item>
          <el-form-item label="风险类型:">
            <span>{{ fxdlFormat(detailData) }}</span>
          </el-form-item>
          <el-form-item label="风险名称:">
            <span>{{ detailData.yjxl }}</span>
          </el-form-item>
          <el-form-item label="风险等级:">
            <span>{{ yjdjFormat(detailData) }}</span>
          </el-form-item>
          <el-form-item label="发生时间:">
            <span>{{
              detailData.yjTime
                ? detailData.yjTime.slice(0, 11)
                : detailData.yjTime
            }}</span>
          </el-form-item>
          <el-form-item label="风险详情:">
            <span>{{ detailData.yjxq }}</span>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button
            @click="dialogDetail = false"
            type="primary"
          >关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {
  updateQyhxHistoryReaded,
  getQyfx,
  getQyfxByLoginName,
} from '@/api/manager.js'
export default {
  components: {},
  data() {
    return {
      comInfo: { updateTime: {} },
      loading: false,
      activeSelectOne: 'all',
      activeSelectTwo: 'all',
      activeSelectTree: 'all',
      dataFXDL: [],
      dataYJDJ: [],
      selectOptions3: [
        { fieldCode: '0', fieldName: '今天' },
        { fieldCode: '7', fieldName: '近7天' },
        { fieldCode: '30', fieldName: '近30天' },
        { fieldCode: '10', fieldName: '自定义' },
      ],
      pageNumTwo: 1,
      pageSizeTwo: 10,
      totalTwo: 0,
      tableDataTwo: [],
      dialogDetail: false,
      detailData: {},
      isShowDate: false,
      dateValue: '',
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  created() {
    this.getQyFx()
    this.getDictDataList()
  },
  mounted() {},
  methods: {
    ...mapActions(['getWebSocketDataList', 'websocketonmessage']),
    //查看详情
    detailBtn(e) {
      this.detailData = e
      this.dialogDetail = true
      let params = { id: e.id }
      updateQyhxHistoryReaded(params).then((res) => {
        if (res.status) {
          this.getWebSocketDataList()
          this.initWebSocket()
        }
      })
    },
    initWebSocket() {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https   key你自定义的key
      //var host = window.location.host  m418160z45.mdo.co:18584
      //let websockUrl="ws://192.168.2.25:9002/jrfk/qyxx/api/websocket/"
      let websockUrl = process.env.VUE_APP_WEB_SOCKET_HOST
      this.websock = new WebSocket(websockUrl + this.token)
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onmessage = this.websocketmessage
      this.websock.onclose = this.websocketclose
      //this.websock.send("您好啊");
    },
    websocketonopen() {
      console.log('wssuccess')
    },
    websocketonerror() {
      console.log('wsfail')
    },
    //这个是收到后端主动推送的值
    websocketmessage(e) {
      let dataList = JSON.parse(e.data)
      this.websocketonmessage(dataList)
    },
    //获取表格数据
    getQyFx() {
      let params = {
        pageSize: this.pageSizeTwo,
        pageNum: this.pageNumTwo,
        //qymc: this.comInfo.qymc,
      }
      if (this.activeSelectOne == 'all') {
        delete params['fxdl']
      } else {
        params['fxdl'] = this.activeSelectOne
      }
      if (this.activeSelectTwo == 'all') {
        delete params['yjdj']
      } else {
        params['yjdj'] = this.activeSelectTwo
      }
      if (this.activeSelectTree == 'all') {
        delete params['startTime']
        delete params['endTime']
      } else if (this.activeSelectTree == '10') {
        params['startTime'] = this.dateValue[0]
        params['endTime'] = this.dateValue[1]
      } else {
        params['startTime'] = this.getPreviousDate(this.activeSelectTree)
        params['endTime'] = this.getNewDate()
      }
      this.loading = true
      getQyfxByLoginName(params).then((res) => {
        if (res.status) {
          this.loading = false
          let newObj = JSON.parse(JSON.stringify(res.data))
          this.totalTwo = newObj.total ? Number(newObj.total) : 0
          this.tableDataTwo = res.data.records ? res.data.records : []
        } else {
          this.loading = false
        }
      })
    },
    async getDictDataList() {
      const dataYJDJ = await this.$store.dispatch('asyncApi/getDict', {
        code: 'YJDJ',
      })
      this.dataYJDJ = dataYJDJ
      const dataFXDL = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXDL',
      })
      this.dataFXDL = dataFXDL
    },
    //获取近N天日期
    getPreviousDate(numOfDays) {
      var date = new Date()
      date.setDate(date.getDate() - numOfDays)
      var year = date.getFullYear()
      var month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return `${year}-${month}-${day}`
    },
    //获取当前日期
    getNewDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return `${year}-${month}-${day}`
    },
    //分页
    sizeChangeTwo(val) {
      this.pageSizeTwo = val
      this.pageNumTwo = 1
      this.getQyFx()
    },
    //分页
    pageChangeTwo(val) {
      this.pageNumTwo = val
      this.getQyFx()
    },
    //风险类型表格格式化
    fxdlFormat(row) {
      for (let i = 0; i < this.dataFXDL.length; i++) {
        if (this.dataFXDL[i].value == row.fxdl) {
          return this.dataFXDL[i].label
        }
      }
    },
    //风险等级表格格式化
    yjdjFormat(row) {
      for (let i = 0; i < this.dataYJDJ.length; i++) {
        if (this.dataYJDJ[i].value == row.yjdj) {
          return this.dataYJDJ[i].label + '风险'
        }
      }
    },
    //风险类型点击事件
    handlActiveOne(val) {
      if (this.activeSelectOne == val) return
      this.activeSelectOne = val
      this.pageNumTwo = 1
      this.getQyFx()
    },
    //风险等级点击事件
    handlActiveTwo(val) {
      if (this.activeSelectTwo == val) return
      this.activeSelectTwo = val
      this.pageNumTwo = 1
      this.getQyFx()
    },
    //时间点击事件
    handlActiveTree(val) {
      console.log(val)
      if (this.activeSelectTree == val) return
      this.activeSelectTree = val
      if (val == 10) {
        this.isShowDate = true
      } else {
        this.isShowDate = false
        this.dateValue = ''
        this.pageNumTwo = 1
        this.getQyFx()
      }
      //
    },
    onDateChange() {
      if (!this.dateValue) return
      this.pageNumTwo = 1
      this.getQyFx()
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.pagination {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.basicInfo {
  position: relative;
  background: #fff;
  padding: 10px 20px 30px;
}
.dateClassBox {
  position: absolute;
  top: 218px;
  left: 520px;
}
.spanClass {
  color: #4a8bf6;
  cursor: pointer;
}
.contBox {
  margin: 0 70px !important;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.app-container {
  padding: 24px;
  // background: #fff;
  font-size: 14px;
}
.select {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* .selectTypes {
    padding-left: 24px;
    display: flex;
    align-items: center;
  }

  .selectTypes span:not(:first-child) {
    display: inline-block;
    margin-right: 20px;
    padding: 6px 8px;
  }
  .selectTypes span:not(:first-child):hover {
    cursor: pointer;
    background-color: #1890ff;
    color: #fff;
  }
  .selectTypes .cur {
    background-color: #1890ff !important;
    color: #fff !important;
  }
  .selectTypes .disable {
    background-color: #fff;
    color: #a6a6a6;
  } */
  .selectType {
    padding-left: 24px;
    display: flex;
    align-items: center;
  }
  .selectType span:not(:first-child) {
    display: inline-block;
    margin-right: 20px;
    padding: 6px 8px;
  }
  .selectType span:not(:first-child):hover {
    cursor: pointer;
    background-color: #1890ff;
    color: #fff;
  }

  .selectType .cur {
    background-color: #1890ff !important;
    color: #fff !important;
  }
  .selectType .disable {
    background-color: #fff;
    color: #a6a6a6;
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.msgInfo {
  color: #000;
}
.pray {
  color: #a6a6a6;
}
.glqy {
  color: #4a8bf6;
}
.glqy:hover {
  cursor: pointer;
}
</style>